import React from 'react';
import { Menu, Dropdown, notification } from 'antd';
import { Link } from 'react-router-dom';
import './index.styl';
import logo from '@images/cquforum.png'
import { Input, Button, Avatar, Row, Col } from 'antd';
import API from "@common/api.js"
import updateUserInfo from "./updateUserInfo";
import userStore from "../../common/userStore";
import renderMarkdown from "../markdownViewer/MarkdownViewer";
class Nav extends React.Component {

  constructor(props) {
    super(props);
    updateUserInfo();
    this.render = this.render.bind(this);
    this.setLogin = this.setLogin.bind(this);
    userStore.subscribe(this.setLogin);
    this.signOut = this.signOut.bind(this)
    console.log("the render result is:");
    console.log(renderMarkdown());
    this.state = {
      isLogin: userStore.getState().isLogin,
    }
    this.addSearch = this.addSearch.bind(this);
    // this.state ={
    //   isLogin: localUserInfo.isLogin,
    // }
  }

  setLogin() {
    this.setState({
      isLogin: userStore.getState().isLogin,
    })
  }

  addSearch(searchKey) {
    userStore.dispatch({type: 'search', isSearch: true, searchKey: searchKey});
  }

  signOut() {
    API.logout().then(response => {
      setTimeout(() => {
        this.props.history.push('/')
      }, 500);
    })
  }

  render() {
    const Search = Input.Search;
    const menu_in = (<Menu>
      <Menu.Item key="0">
        <Link to="/accountInfo" >关于我</Link>
      </Menu.Item>
      <Menu.Item key="1" onClick={this.signOut}>退出登录</Menu.Item>
    </Menu>);
    const menu_out = (<Menu>
      <Menu.Item key="0">
        <Link to="/login" >登录</Link>
      </Menu.Item>
    </Menu>);
    return (
      <nav className="page-header">
        <Row type="flex" justify="center">
          <Col span={5} ><a href={"/"} ><img src={logo} width={'64px'} /></a></Col>
          <Col span={5} push={1} className="search">
            <Search
              placeholder="input search text"
              onSearch={this.addSearch}
              enterButton
              style={{ width: 200 }}
            />
          </Col>
          <Col span={2} className="post">
            <Link to="/postTopic">发帖</Link>
          </Col>
          <Col span={2} className="avatar">
            <Dropdown overlay={this.state.isLogin ? menu_in : menu_out} trigger={['click']}>
              <Avatar src = {userStore.getState().avatar} size="large" />
            </Dropdown>
          </Col>
        </Row>
      </nav>
    )
  }
  componentDidMount() {
    // if (!this.props.userInfo) {
    //   API.getUserInfo().then(response => {
    //     // console.log(response);
    //     this.props.addUserInfo(response.data);
    //   })
    // }
  }
}
export default Nav;